<!--
 * @Description: 任务属性面板
 * @Author: DHL
 * @Date: 2022-07-11 08:18:22
 * @LastEditors: DHL
 * @LastEditTime: 2023-09-07 15:15:06
-->

<template>
  <div class="process-panel-tab__content">
    <el-form ref="dbFormRef" label-width="80px">
      <el-form-item label="制单" v-if="bpmnStore.activatedElementType === 'UserTask'">
        <el-checkbox v-model="taskForm.documentMaking" label="" @change="handleChangeTask()" />
      </el-form-item>

      <el-form-item label="异步延续">
        <el-checkbox v-model="taskForm.asyncBefore" label="异步前" @change="handleChangeTask()" />
        <el-checkbox v-model="taskForm.asyncAfter" label="异步后" @change="handleChangeTask()" />
        <el-checkbox
          v-model="taskForm.exclusive"
          label="排除"
          v-if="taskForm.asyncAfter || taskForm.asyncBefore"
          @change="handleChangeTask()"
        />
      </el-form-item>

      <el-form-item label="任务分类">
        <el-select
          v-model="taskForm.category"
          placeholder="请选择任务分类"
          @change="handleChangeTask()"
        >
          <tw-dic dicKey="FLOW_TASK_CATEGORY"></tw-dic>
        </el-select>
      </el-form-item>
    </el-form>

    <user-task v-if="bpmnStore.activatedElementType === 'UserTask'"></user-task>
    <service-task v-if="bpmnStore.activatedElementType === 'ServiceTask'"></service-task>
    <script-task v-if="bpmnStore.activatedElementType === 'ScriptTask'"></script-task>
    <receive-task v-if="bpmnStore.activatedElementType === 'ReceiveTask'"></receive-task>
  </div>
</template>

<script lang="ts">
  export default { name: 'PanelTask' }
</script>

<script setup lang="ts">
  import { useBpmnStore } from '../../store/bpmn'
  import UserTask from './components/userTask/userTask.vue'
  import ServiceTask from './components/serviceTask.vue'
  import ScriptTask from './components/scriptTask.vue'
  import ReceiveTask from './components/receiveTask.vue'

  const bpmnStore = useBpmnStore()

  watch(
    () => bpmnStore.activatedElementId,
    (newVal) => {
      if (newVal) {
        nextTick(() => {
          Object.assign(taskForm, {
            asyncAfter: bpmnStore.activatedElement.businessObject.asyncAfter,
            asyncBefore: bpmnStore.activatedElement.businessObject.asyncBefore,
            exclusive: bpmnStore.activatedElement.businessObject.exclusive,
            category: bpmnStore.activatedElement.businessObject.category,
            documentMaking: bpmnStore.activatedElement.businessObject.documentMaking
          })
        })
      }
    },
    {
      immediate: true
    }
  )

  const taskForm: any = reactive({
    asyncAfter: false,
    asyncBefore: false,
    exclusive: false,
    category: null,
    documentMaking: false
  })

  function handleChangeTask() {
    if (!taskForm.asyncBefore && !taskForm.asyncAfter) {
      taskForm.exclusive = false
    }

    bpmnStore.updateProperties({
      ...taskForm
    })
  }
</script>

<style scoped lang="scss"></style>
